<template>
  <div>
    <el-row align="middle" class="pt-20">
      <el-col :span="16">
        <p class="main_title">{{ $t("menu.SPIDER") }}</p>
      </el-col>
    </el-row>
    <div style="display: flex; margin: 15px;0;15px;0">
      <div
        style="flex: 0 0 70%;padding-right: 5px;padding-left: 5px;"
        class="mb-4"
      >
        <el-row class="search_block pt-20">
          <el-col :span="2" class="hori-cond"
            ><label class="form-label">来源</label></el-col
          >
          <el-col :span="3">
            <el-select
              v-model="searchData.webid"
              placeholder=""
              @change="doInfoList"
              clearable
              filterable
            >
              <el-option
                v-for="item in searchWebs"
                :key="item.webid"
                :label="item.webname"
                :value="item.webid"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="2" class="hori-cond"
            ><label class="form-label">类型</label></el-col
          >
          <el-col :span="3">
            <el-select
              v-model="searchData.info"
              placeholder=""
              @change="doList"
              clearable
              filterable
            >
              <el-option
                v-for="item in infoList"
                :key="item.key"
                :label="item.label"
                :value="item.key"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="1" class="hori-cond"></el-col>
          <el-col :span="9">
            <el-input
              placeholder="请输入赛事ID"
              v-model="searchData.raceid"
              class="input-with-select"
              clearable
              @change="doList"
            >
              <el-button slot="append" icon="el-icon-search" @click="doList"
                >查询</el-button
              >
            </el-input>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="table_container">
      <el-table :data="logs" :header-cell-style="boxheader" style="width: 100%">
        <el-table-column min-width="20px" align="center" :label="$t('log.ID')">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="40px" align="center" label="赛事">
          <template slot-scope="scope">
            <span v-if="scope.row.raceid != ''"
              ><a
                @click="goto('race', scope.row.webid, scope.row.raceid)"
                style="color: #409eff; cursor: pointer"
                >{{ scope.row.raceid }}</a
              ></span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="info"
          min-width="40px"
          align="center"
          label="任务类型"
        >
        </el-table-column>
        <el-table-column
          prop="url"
          min-width="50px"
          align="center"
          label="URL"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column min-width="40px" align="center" label="结果">
          <template slot-scope="scope">
            <span v-if="scope.row.result === 0">成功</span>
            <el-tag type="danger" effect="dark" v-if="scope.row.result !== 0"
              >失败</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="message"
          min-width="80px"
          align="center"
          label="描述"
        >
        </el-table-column>
        <el-table-column
          prop="addtime"
          min-width="80px"
          align="center"
          :label="$t('log.ADDTIME')"
        >
        </el-table-column>
      </el-table>

      <div
        class="col-sm pt-3 text-sm-left"
        style="text-align:right; display: contents"
      >
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchData.curpage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="searchData.pagesize"
          layout="total, sizes,  pager, jumper"
          :total="searchData.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import webService from "@/service/webService";
import spiderLogsService from "@/service/spiderLogsService";

export default {
  name: "SpiderLogsList",
  data() {
    return {
      boxheader: {
        // background: '#eef1f6',
        color: "#606266",
        fontWeight: 800,
        borderBottom: "2px solid #EBEEF5"
      },
      searchData: {
        webid: 2,
        raceid: "",
        info: "",
        term: "",
        curpage: 1,
        pagesize: 10,
        total: 0
      },
      searchWebs: [],
      infoList: [
        { key: "", label: "全部" },
        { key: "赛事扫描", label: "赛事扫描" },
        { key: "成绩刷新", label: "成绩刷新" },
        { key: "成绩上报", label: "成绩上报" }
      ],
      logs: []
    };
  },
  watch: {},
  mounted: function() {
    // commit('SET_ACTIVE', 6)
    this.$store.dispatch("setActive", "8").then(() => {
      // this.$root.eventBus.$emit('exit')
    });
    // localStorage.setItem('active', 6)
  },
  created() {
    if (this.$route.params && this.$route.params.webid) {
      this.searchData.webid = this.$route.params.webid;
      this.searchData.raceid = this.$route.params.raceid;
    }
    this.doWebList();
  },
  destroyed() {},
  methods: {
    doWebList() {
      webService
        .listWebs({ status: 0, curpage: 1, pagesize: 9999 })
        .then(res => {
          if (res && res.data.result === 0) {
            for (let item of res.data.data) {
              this.searchWebs.push(item);
            }
            this.doInfoList();
          }
        });
    },
    doInfoList() {
      this.searchData.info = "";
      if (this.searchData.webid == 0) {
        this.infoList = [
          { key: "", label: "全部" },
          { key: "公棚扫描", label: "公棚扫描" },
          { key: "公告扫描", label: "公告扫描" },
          { key: "创建公告", label: "创建公告" },
          { key: "更新公告", label: "更新公告" },
          { key: "收鸽清单监控", label: "收鸽清单监控" },
          { key: "收鸽清单上报", label: "收鸽清单上报" }
        ];
      } else {
        this.infoList = [
          { key: "", label: "全部" },
          { key: "赛事扫描", label: "赛事扫描" },
          { key: "赛事监控", label: "赛事监控" },
          { key: "成绩刷新", label: "成绩刷新" },
          { key: "成绩上报", label: "成绩上报" }
        ];
      }
      this.doList();
    },
    doList() {
      this.searchData.curpage = 1;
      this.listSpiderLogs();
    },
    listSpiderLogs() {
      spiderLogsService.listSpiderLogs(this.searchData).then(res => {
        if (res && res.data.result === 0) {
          this.logs = res.data.data;
          this.searchData.total = res.data.total;
        }
      });
    },
    handleSizeChange(val) {
      this.searchData.pagesize = val;
      this.listSpiderLogs();
    },
    handleCurrentChange(val) {
      this.searchData.curpage = val;
      this.listSpiderLogs();
    },
    goto(type, webid, raceid) {
      this.$router.push({
        name: `${type}Link`,
        params: { webid: webid, raceid: raceid }
      });
    }
  }
};
</script>
